<template>
  <div class="isbody">
    <el-card>
      <el-form ref="ruleForm" :model="addForm" :rules="addRules" class="demo-ruleForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区" prop="code">
              <el-cascader
                v-model="location"
                :props="propsList"
                @change="cascaderChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区编号" prop="code">
              <el-input v-model="addForm.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位名称" prop="code">
              <el-input v-model="addForm.name" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select v-model="addForm.temperatureType" placeholder="请选择">
                <el-option label="常温" value="CW" />
                <el-option label="冷藏" value="LC" />
                <el-option label="恒温" value="HW" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select v-model="addForm.bearingType" placeholder="请选择">
                <el-option label="重型" value="ZX" />
                <el-option label="轻型" value="QX" />
                <el-option label="中型" value="OX" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
              <el-select v-model="addForm.useType" placeholder="请选择">
                <el-option label="入库缓存区" value="RKHCQ" />
                <el-option label="出库缓存区" value="CKHCQ" />
                <el-option label="存储区" value="CCQ" />
                <el-option label="分拣区" value="FJQ" />
                <el-option label="质检区" value="ZJQ" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区状态" prop="status">
              <el-radio-group v-model="addForm.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承载体积" prop="code">
              <el-input v-model="addForm.maxWeight" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载上限" prop="code">
              <el-input v-model="addForm.maxNum" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载重量" prop="code">
              <el-input v-model="addForm.maxVolume" placeholder="请选择" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="idpai">用户排/列/层</div>
            <el-row>
              <el-col :span="8">
                <el-input v-model="addForm.locationRow" placeholder="请选择" />
              </el-col>
              <el-col :span="8">
                <el-input v-model="addForm.locationColumn" placeholder="请选择" />
              </el-col>
              <el-col :span="8">
                <el-input v-model="addForm.locationLayer" placeholder="请选择" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="idpai">用户长/宽/高</div>
            <el-row>
              <el-col :span="8">
                <el-input v-model="addForm.locationWidth" placeholder="请选择" />
              </el-col>
              <el-col :span="8">
                <el-input v-model="addForm.locationLength" placeholder="请选择" />
              </el-col>
              <el-col :span="8">
                <el-input v-model="addForm.locationHigh" placeholder="请选择" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card">
      <el-button round @click="removeList">返回</el-button>
      <el-button type="primary" round class="btn" @click="addList">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import { loactionCode, loactioncascade, loactioncascadeChildren, addlocation, editlocation, editlocationList } from '@/api/manage-base-info.js'
export default {
  data() {
    return {
      editList: [],
      addForm: {
        code: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        status: '1',
        maxVolume: '',
        maxNum: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationWidth: '',
        locationLength: '',
        locationHigh: '',
        location: [],
        areaId: '',
        warehouseId: '',
        // 修改
        createName: '',
        createTime: '',
        createUser: '',
        frozen: null,
        logicDel: null,
        remark: '',
        updateName: '',
        updateTime: '',
        updateUser: '',
        useStatus: null,
        id: ''
      },
      editFrom: {},
      location: [],
      addRules: {
      },
      propsList: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          if (!node.data) {
            loactioncascade().then(res => {
              const nodes = Array.from(res.data).map(item => {
                return {
                  value: item.id,
                  label: `${item.name}`,
                  leaf: level >= 1
                }
              })
              resolve(nodes)
            })
          } else {
            loactioncascadeChildren({ warehouseId: node.data.value, status: 1 }).then(res => {
              const nodes = Array.from(res.data).map(item => {
                this.editList = res.data
                return {
                  value: item,
                  label: `${item.name}`,
                  leaf: level >= 1
                }
              })
              resolve(nodes)
            })
          }
        }
      }
    }
  },
  async created() {
    if (this.$route.params.id === 'null') {
      const res = await loactionCode()
      this.addForm.code = res.data
    } else {
      const res = await editlocation(this.$route.params.id)
      this.editFrom = res.data
      this.addForm.code = this.editFrom.code
      this.addForm.name = this.editFrom.name
      this.addForm.temperatureType = this.editFrom.temperatureType
      this.addForm.bearingType = this.editFrom.bearingType
      this.addForm.useType = this.editFrom.useType
      this.addForm.maxVolume = this.editFrom.maxVolume
      this.addForm.maxNum = this.editFrom.maxNum
      this.addForm.locationRow = this.editFrom.locationRow
      this.addForm.locationColumn = this.editFrom.locationColumn
      this.addForm.locationLayer = this.editFrom.locationLayer
      this.addForm.locationWidth = this.editFrom.locationWidth
      this.addForm.locationLength = this.editFrom.locationLength
      this.addForm.locationHigh = this.editFrom.locationHigh
      this.addForm.areaId = this.editFrom.areaId
      this.addForm.warehouseId = this.editFrom.warehouseId
      this.addForm.location = [this.editFrom.warehouseId, this.editFrom.areaId]
      this.addForm.createName = this.editFrom.createName
      this.addForm.createTime = this.editFrom.createTime
      this.addForm.createUser = this.editFrom.createUser
      this.addForm.frozen = this.editFrom.frozen
      this.addForm.logicDel = this.editFrom.logicDel
      this.addForm.remark = this.editFrom.remark
      this.addForm.updateName = this.editFrom.updateName
      this.addForm.updateTime = this.editFrom.updateTime
      this.addForm.updateUser = this.editFrom.updateUser
      this.addForm.useStatus = this.editFrom.useStatus
      this.addForm.id = this.$route.params.id
    }
  },
  methods: {
    cascaderChange() {
      this.addForm.temperatureType = this.location[1].temperatureType
      this.addForm.useType = this.location[1].useType
      this.addForm.bearingType = this.location[1].bearingType
      this.addForm.location.push(this.location[0], this.location[1].id)
      this.addForm.areaId = this.addForm.location[1]
      this.addForm.warehouseId = this.addForm.location[0]
      console.log(this.addForm.location)
    },
    async addList() {
      if (this.$route.params.id === 'null') {
        await addlocation(this.addForm)
        this.$message.success('添加成功！')
        this.$router.back()
      } else {
        await editlocationList(this.addForm)
        this.$message.success('添加成功！')
        this.$router.back()
      }
    },
    removeList() {
      this.$router.back()
    }
  }

}
</script>

<style lang="scss" scoped>
.isbody{
  padding: 15px;
}
::v-deep .el-form-item__label{
  margin-top: -10px;
  font-size: 12px;
}
.el-col{
  padding-left: 15px;
    padding-right: 15px;
}
.el-select {
  width: 100%;
}
.el-radio-group{
  width: 100%;
}
.btn{
  color: #000;
}
.el-button{
  width: 170px;
}
.idpai{
font-size: 12px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    color: #887e7e;
    margin-bottom: 15px;
}
.el-cascader{
  width: 100%;
}
.card{
  text-align: center;
}
</style>
